<template>
  <transition name="right">
    <div id="user">
      用户页面展示
    </div>
  </transition>
</template>

<script scoped>
export default {
  name: 'User',
  data () {
    return {}
  },
  components: {}
}
</script>

<style lang='less' scoped>
  .right-enter-active {
  animation: right-in .5s;
}
.right-leave-active {
  animation: right-in .5s reverse;
}
  @keyframes right-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0, 0);
  }
  100% {
    transform: translate3d(0%, 0, 0);
  }
}
  #user {
    width: 100%;
    height: 2000px;
    background-color: yellow;
  }
</style>
